/*
***************************************************************************************
 * STYLES @media: all
 * Adaptive style // Mobile approach
 * Author: valerie@wephic.net
 *
***************************************************************************************
 */
/*
 * ANTISCREEN
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
**********************************************/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers
----------------------------------------------*/
article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}

/* hide any HRs used in the layout, but show them in main content */
hr,
.ahem,
#skip-link{
  display:none;
}
#content hr{
  display:block;
}
.offscreen{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* uncomment these color rules to make the layout easier to see */
/*
#main           { background: #ccc; }
#content        { background: #eee; }
#sidebar-first  { background: #ccf; }
#sidebar-second { background: #fcc; }
#navigation     { background: #ffc; }
#header         { background: #cff; }
#footer         { background: #cfc; }
*/
/*
 * COLOURS
 *  - grey -
 *              35,31,32        reverse out
 *              86,88,90
 *              133,136,139     pantone 877c
 *              247,247,247
 *              204,204,204
 *
********************************************************************/

/*
 * GENERIC + CLASSES
**********************************************/
html{/*Fix text size on orientation change on mobile*/
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
body{
    color:rgb(35,31,32);
    background-color:rgb(255,255,255);
    direction:ltr;
    font:100%/100% 'Century Gothic',Arial, Helvetica, sans-serif;/*62.5*/
    height:100%;
    
}
img{
    max-width:100%;
    height:auto;
}
/* Typography
----------------------------------------------*/
h1{
    font-size:180%;
    font-weight:400;
    line-height:150%;
    margin-bottom:.5em;
}
h1#page-title{
    background-color:rgb(35,31,32);
    color:rgb(255,255,255);
    padding:10px 20px;
}
h2{
    font-size:160%;
    font-weight:400;
    line-height:150%;
    margin-bottom:.5em;
}
h3{
    font-size:140%;
    font-weight:400;
    line-height:150%;
    margin-bottom:.5em;
}
h4{
    font-size:130%;
    font-weight:400;
    line-height:150%;
    margin-bottom:.5em;
}
p,blockquote,li,dt,dd,caption{
    font-size:100%;
    line-height:150%;
    margin-bottom:.5em;
}

em{
    font-style:oblique;
}
b,strong{
    font-weight:700;
}
blockquote,figure{
    border:1px solid rgb(133,136,139);
    padding:10px;
}
abbr[title]{
    border-bottom:1px dotted rgb(133,136,139);
}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup{
    top:-0.5em;
}
sub{
    bottom:-0.25em;
}
/* Links
----------------------------------------------*/
a,a:link{
    outline:none;
    text-decoration:none;
    color:rgb(0,0,0);
}
a:visited{
}
a:hover,
a:active,
a:focus{
    text-decoration:underline;
}
/* Lists
----------------------------------------------*/
ul{
    font-size:100%;
    line-height:100%;
    list-style:disc outside;
    margin:0 0 .7em 21px;
    padding:0;
}
ol{
    font-size:100%;
    line-height:100%;
    list-style:decimal outside;
    margin:0 0 .7em 21px;
    padding:0;
}
li li{
    font-size:100%;
    line-height:100%;
}
dl{
    font-size:100%;
    line-height:100%;
    margin:0 0 .7em 0;
    padding:0;
}
dl dt{
    font-size:100%;
    line-height:100%;
    font-weight:700;
    padding-left:21px;
}
dl dd{
    font-size:100%;
    line-height:100%;
    padding-left:21px;
}
/* Table
----------------------------------------------*/
table{
    border:3px double rgb(133,136,139);
    border-collapse:separate;
    border-spacing:0;
    empty-cells:show;
    text-align:left;
    margin:10px;
}

th,td{
    font-size:100%;
    line-height:150%;
    padding:2px;
}
th{
    font-weight:700;
}
thead th{
    background-color:rgb(35,31,32);
    color:rgb(255,255,255);
}
tfoot th,tfoot td{
    border-top:1px solid rgb(133,136,139);
}
/* Form
----------------------------------------------*/
label,input,select,textarea{
    font:inherit;
}
input[type=submit],input[type=reset],input[type=password],input[type=text],input[type=search],textarea,select{
    border:1px solid rgb(133,136,139);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.3);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.3);
    box-shadow:0px 0px 4px rgba(0,0,0,0.3);
    padding:5px;
}
input[type=submit]:hover,input[type=reset]:hover,input[type=password]:hover,input[type=text]:hover,input[type=search]:hover,textarea:hover,select:hover,
input[type=submit]:focus,input[type=reset]:focus,input[type=password]:focus,input[type=text]:focus,input[type=search]:focus,textarea:focus,select:focus{
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.6);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.6);
    box-shadow:0px 0px 4px rgba(0,0,0,0.6);
}
input[type=submit],input[type=reset]{
    background-color:rgb(35,31,32);
    color:rgb(255,255,255);
    padding:5px 20px;
}
label,input[type=submit],input[type=reset]{
    cursor:pointer;
}
label,input[type=text],input[type=password]{
    display:inline-block;
}
/*
 * LAYOUT
**********************************************/
/*header*/
#header{
    padding:20px;
}
#name-and-slogan{
    clear:right;
    font-size:140%;
    text-align:right;
    float:right;
}
#block-search-form{
    clear:right;
    float:right;
    margin-top:3em;
}
#block-search-form input[type=search]{
    margin-right:1em;
    width:12em;
}
#logo{
    display:block;
    float:left;
}
/*content*/
#content .node-page .content{
    padding:20px;
}
/*navigation*/
#navigation{
    border:1px solid rgb(35,31,32);
    border-width:1px 0;
    font-size:115%;
    padding:10px 20px;
}
#navigation ul{
    list-style:none;
    margin:0;
    padding:0;
}
#navigation li{
    list-style:none;
    margin:5px 0;
    padding:0;
}
#navigation a,#navigation a:link{
    text-decoration:none;
    display:block;
    padding:5px;
}
#navigation a:visited{

}
#navigation a:hover,#navigation a:link:hover,
#navigation a:focus,#navigation a:link:focus{
    text-decoration:none;
    background-color:rgb(247,247,247);
}
#navigation a.active,#navigation a.active:link{
    font-weight:700;
}
/*sidebars*/
.sidebar{
    padding:20px;
}
/*login*/
#user-login-form label{
    width:7em;
}
#block-user-login h2{
    background-color:rgb(204,204,204);
    padding:5px 10px;
}
#block-user-login .content{
    padding:0 10px;
}
/*footer*/
#footer{
    border-top:1px solid rgb(35,31,32);
    color:rgb(86,88,90);
    font-size:90%;
    padding:20px;
}

/*
*************************************************
 * MOBILE STYLES - 320
 * Notes: this is not working on IE6/7/8
 * - only screen media
 * - 320px <= width
*************************************************
*/
@media only screen and (min-device-width:321px) and (min-width:321px){

}/* end @media only screen 320px <= width */


/*
*************************************************
 * MOBILE STYLES - 480
 * Notes: this is not working on IE6/7/8
 * - only screen media
 * - 480px <= width
*************************************************
*/
@media only screen and (min-device-width:481px) and (min-width:481px){

}/* end @media only screen 480px <= width */

/*
*************************************************
 * PAD STYLES
 * Notes:this is not working on IE6/7/8
 * - only screen media
 * - 640px <= width
*************************************************
*/
@media only screen and (min-device-width:641px) and (min-width:641px){

}/* end @media only screen 640px <= width */

/*
*************************************************
 * SCREEN STYLES
 * Notes:this is not working on IE6/7/8
 * - only screen media
 * - 960px <= width
*************************************************
*/
@media only screen and (min-device-width:961px) and (min-width:961px){
/* Holy Grail Layout ---------------------------------------------------------
   ref: http://www.alistapart.com/articles/holygrail
   This layout takes advantage of negative margins to float the sidebars to
   either side of the main content. It also floats the navigation above the
   content, but you could just as easily absolutely position it.
   
   LC stands for Left Column, RC for Right Column
   
   Obvously, this layout is for left-to-right languages. For a
   right-to-left layout, just swap all the left and rights below.
   */
#page {
  width: 960px;
  margin: 0 auto;
}
#content,
#navigation,
#sidebar-first,
#sidebar-second {
  float: left;
}
.with-navigation #content,
.with-navigation #sidebar-first,
.with-navigation #sidebar-second {
  margin-top: 3em;       /* NAV height */
}
#navigation {
  height: 3em;           /* NAV height */
  width: 100%;
  margin-right: -100%;
}
#navigation h2 {
  margin: 0;
}
#content {
  width: 100%;
  margin-right: -100%;
}
.sidebar-first #content .section {
  padding-left: 200px;   /* LC width */
}
.sidebar-second #content .section {
  padding-right: 160px;  /* RC width */
}
.two-sidebars #content .section {
  padding-left: 200px;   /* LC width */
  padding-right: 160px;  /* RC width */
}
#sidebar-first {
  width: 200px;          /* LC width */
  margin-right: -200px;
}
#sidebar-second {
  float: right;
  width: 160px;          /* RC width */
  margin-left: -160px;   /* RC width */
}
#footer {
  clear: both;
}
/* IE6 fix */
* html #sidebar-first {
  left: 160px;           /* RC width */
}

}/* end @media only screen 940px <= width */
